<template>
  <view class="page">
    <nav-bar>
      <template #title>
        {{ "地图" }}
      </template>
    </nav-bar>
    <view class="container">
      <map
        id="map"
        ref="map"
        show-location
        :latitude="latitude"
        :longitude="longitude"
        @regionchange="regionchange"
        :style="{ width: '100%', height: '100%' }"
      >
        <cover-image
          class="cover-image"
          :src="toCaseImg('location')"
          bindload=""
          binderror=""
        >
        </cover-image
      ></map>
      <mumu-getlocation ref="muLocation"></mumu-getlocation>
    </view>
    <view class="footer">
      <van-button type="success" @click="getLocation">获取定位</van-button>
      <van-button type="success" @click="getRim">查看周边</van-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import mumuGetlocation from "@/uni_modules/mumu-getlocation/components/mumu-getlocation/mumu-getlocation.vue";
import { onLoad } from "@dcloudio/uni-app";
import { jsonp } from "vue-jsonp";
import { useMapStore } from "@/store/modules/map";
const mapStore = useMapStore()
const map = ref(null);
const locationRef = ref(null);
const muLocation = ref(null);
const latitude = ref("31.997858805466");
const longitude = ref("118.78544536406");
onLoad(() => {
  fetchJsonp();
  // 使用 nextTick 等待组件加载完成调用
  //   nextTick(() => {
  //     // 在检测用户是否开启定位权限需要一个过程，推荐使用 login 提示一下
  //     uni.showLoading({
  //       title: "定位组件加载中...",
  //       mask: true,
  //     });
  //     // 初始化组件，并且检测是否开启与授权定位
  //     muLocation.value.__init().then(
  //       (location) => {
  //         // 用户授权了和开启了定位，把定位对象保存到 data 中
  //         locationRef.value = location;
  //         uni.hideLoading();
  //       },
  //       (err) => {
  //         // 用户拒绝了定位请求，获取系统没有开启定位功能
  //         uni.hideLoading();
  //         if (err.code === 1) {
  //           uni.showModal({
  //             title: "获取定位权限失败",
  //             content:
  //               "你拒绝了位置授权服务。请允许当前页面获取定位授权，后刷新页面。",
  //           });
  //         } else {
  //           uni.showModal({
  //             title: "获取定位权限失败",
  //             content:
  //               "请确定手机定位已打开，并且当前浏览器允许获取定位，都开启后请刷新页面。",
  //           });
  //         }
  //       }
  //     );
  //   });
});

// 移动地图区域变化
function regionchange(e) {
  console.log(e, "e");
  if (e.type === "end") {
    latitude.value = e.detail.centerLocation.latitude;
    longitude.value = e.detail.centerLocation.longitude;
    getAddress()
  }
}

// 查看周边
function getRim() {
  const location = {
    latitude: latitude.value,
    longitude: longitude.value,
  }
  navigate('navigateTo', 'rim', location)
  // getAddress()
}

// 根据ip获取经纬度
function fetchJsonp() {
  jsonp("https://apis.map.qq.com/ws/location/v1/ip", {
    output: "jsonp",
    key: mapStore.mapKey,
  })
    .then((res) => {
      longitude.value = res.result.location.lng;
      latitude.value = res.result.location.lat;
      getAddress()
    })
    .catch((err) => {
      console.log(err, "err");
    });
}

// 根据经纬度获取详细地址及周边信息
async function getAddress() {
  const location = {
    latitude: latitude.value,
    longitude: longitude.value,
  }
  try {
    const res = await mapStore.setLocation(location)
    console.log(res, "res =====");
  } catch (err) {
    console.log(err, "err =====");
  }

}

function getLocation() {
  uni.showToast({
    title: "获取定位权限需要放开初始化函数中的注释，默认根据ip获取",
    icon: "none",
  });
  // locationRef.value.getLocation().then((res) => {
  //   console.log(res, "res");
  //   uni.showToast({
  //     content: JSON.stringify(res),
  //   });
  // });
}
</script>

<style scoped lang="scss">
.container {
  margin-bottom: 8px;
  width: 100%;
  height: calc(100% - 104px);
  #map {
    width: 100%;
    height: 100%;
    position: relative;
    .cover-image {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.footer {
  width: 100%;
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .van-button {
    width: 40%;
  }
}
</style>
